<script>
import { useUserStore } from "../../stores/user"
import UserApi from "../../api/user"

export default {
    data() {
        return {
            username: "",
            password: "",
            confirmPassword: "",
            nickname: "",
            truename: "",
            msg: "",
            dangerText: {
                "text-danger": false
            }
        }
    },
    methods: {
        async register() {
            // Validate passwords match
            if (this.password !== this.confirmPassword) {
                this.msg = "两次输入的密码不一致！";
                this.dangerText["text-danger"] = true;
                return;
            }

            let data = {
                username: this.username,
                password: this.password,
                nickname: this.nickname,
                truename: this.truename,
                avatar: "./image/avatar.png",
                role: 2, // Default role for regular users
                updatedTime: Date.now()
            }

            try {
                let api = new UserApi();
                let res = await api.register(data);
                console.log(res);
                
                if (res.data.registerStatus === "failed") {
                    this.msg = `用户名${this.username}注册失败!`;
                    this.dangerText["text-danger"] = true;
                } else {
                    this.msg = `用户名${this.username}注册成功`;
                    this.dangerText["text-danger"] = false;
                    // Set user login status
                    const userStore = useUserStore();
                    userStore.isLogin = true;
                    userStore.userData = res.data;
                    this.$router.replace("/");
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器错误");
            }
        }
    }
}
</script>

<template>
    <div class="register">
        <h2>用户注册</h2>
        <div>
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" v-model="username" placeholder="请输入用户名">
        </div>
        <div>
            <label for="password">密码</label>
            <input type="password" name="password" id="password" v-model="password" placeholder="请输入密码">
        </div>
        <div>
            <label for="confirmPassword">确认密码</label>
            <input type="password" name="confirmPassword" id="confirmPassword" v-model="confirmPassword" placeholder="请再次输入密码">
        </div>
        <div>
            <label for="nickname">昵称</label>
            <input type="text" name="nickname" id="nickname" v-model="nickname" placeholder="请输入昵称">
        </div>
        <div>
            <label for="truename">真实姓名</label>
            <input type="text" name="truename" id="truename" v-model="truename" placeholder="请输入真实姓名">
        </div>
        <div>
            <button @click="register">注册</button>
        </div>
        <div>
            <p :class="dangerText">{{msg}}</p>
        </div>
    </div>
</template>

<style scoped>
.register {
    margin: 50px auto;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.register div {
    margin-top: 1rem;
}

.register label {
    display: inline-block;
    width: 80px;
    padding: 0 10px;
    text-align-last: justify;
}

.text-danger {
    color: red;
}
</style> 